import React from "react";
import "../css/todo.css";
import { TODOKEY, FINISHED, PENDDING, DELETED } from "./Mana";

class TodoBoard extends React.Component {
  //定义组件的初始化状态
  constructor(props) {
    super(props);
    this.state = {
      todos: JSON.parse(localStorage.getItem(TODOKEY)) || [],
      filterTodo: [],
    };
  }

  //创建阶段
  //组件将要挂载
  componentWillMount() {
    this.setState({
      filterTodo: this.state.todos,
    });
  }

  render() {
    console.log(this.props);
    return (
      <div className="todo_container">
        <div>
          <h3>全部</h3>
          <div>
            {this.state.todos.map((element, index) => {
             if(element.status!==DELETED){
                return (
                    <div key={index} className="todo_item">
                      <div className="todo_item_checked">
                        <input
                          checked={element.status === FINISHED}
                          type="checkbox"
                          onChange={(event) => {
                            //  console.log(event.target.checked);
                            var checked = event.target.checked;
                            if (checked) {
                              //    console.log(index);
                              element.status = FINISHED;
                            } else {
                              element.status = PENDDING;
                            }
                            //更新组件的护照那台
                            this.setState({
                              todos: this.state.todos,
                            });
    
                            //保存
                            localStorage.setItem(
                              TODOKEY,
                              JSON.stringify(this.state.todos)
                            );
                          }}
                        ></input>
                      </div>
                      <div className="todo_item_content">{element.content}</div>
                      <div className="todo_item_remove">
                        <button
                          onClick={() => {
                            element.status = DELETED;
                            //更新组件的护照那台
                            this.setState({
                                todos: this.state.todos,
                              });
      
                              //保存
                              localStorage.setItem(
                                TODOKEY,
                                JSON.stringify(this.state.todos)
                              );
                          }}
                        >
                          X
                        </button>
                      </div>
                    </div>
                  );
             }
            })}
          </div>
        </div>
        <div>
          <h3>正在进行时</h3>
          <div>
            {this.state.filterTodo.map((element, index) => {
              if (element.status === PENDDING) {
                return (
                  <div key={index} className="todo_item">
                    <div className="todo_item_checked">
                      <input
                        checked={element.status === FINISHED}
                        type="checkbox"
                        onChange={(event) => {
                          //  console.log(event.target.checked);
                          var checked = event.target.checked;
                          if (checked) {
                            //    console.log(index);
                            element.status = FINISHED;
                          } else {
                            element.status = PENDDING;
                          }
                          //更新组件的护照那台
                          this.setState({
                            todos: this.state.todos,
                          });

                          //保存
                          localStorage.setItem(
                            TODOKEY,
                            JSON.stringify(this.state.todos)
                          );
                        }}
                      ></input>
                    </div>
                    <div className="todo_item_content">{element.content}</div>
                    <div className="todo_item_remove">
                      <button
                       onClick={() => {
                        element.status = DELETED;
                        //更新组件的护照那台
                        this.setState({
                            todos: this.state.todos,
                          });
  
                          //保存
                          localStorage.setItem(
                            TODOKEY,
                            JSON.stringify(this.state.todos)
                          );
                      }}>X</button>
                    </div>
                  </div>
                );
              }
            })}
          </div>
        </div>
        <div>
          <h3>已完成</h3>
          <div>
            {this.state.filterTodo.map((element, index) => {
              if (element.status === FINISHED) {
                return (
                  <div key={index} className="todo_item">
                    <div className="todo_item_checked">
                      <input
                        checked={element.status === FINISHED}
                        type="checkbox"
                        onChange={(event) => {
                          //  console.log(event.target.checked);
                          var checked = event.target.checked;
                          if (checked) {
                            //    console.log(index);
                            element.status = FINISHED;
                          } else {
                            element.status = PENDDING;
                          }
                          //更新组件的护照那台
                          this.setState({
                            todos: this.state.todos,
                          });

                          //保存
                          localStorage.setItem(
                            TODOKEY,
                            JSON.stringify(this.state.todos)
                          );
                        }}
                      ></input>
                    </div>
                    <div className="todo_item_content">{element.content}</div>
                    <div className="todo_item_remove">
                      <button 
                       onClick={() => {
                        element.status = DELETED;
                        //更新组件的护照那台
                        this.setState({
                            todos: this.state.todos,
                          });
  
                          //保存
                          localStorage.setItem(
                            TODOKEY,
                            JSON.stringify(this.state.todos)
                          );
                      }}>X</button>
                    </div>
                  </div>
                );
              }
            })}
          </div>
        </div>
        <div>
          <h3>已删除</h3>
          <div>
            {this.state.filterTodo.map((element, index) => {
              if (element.status === DELETED) {
                return (
                  <div key={index} className="todo_item">
                    <div className="todo_item_checked">
                      <input
                        checked={element.status === FINISHED}
                        type="checkbox"
                        onChange={(event) => {
                          //  console.log(event.target.checked);
                          var checked = event.target.checked;
                          if (checked) {
                            //    console.log(index);
                            element.status = FINISHED;
                          } else {
                            element.status = PENDDING;
                          }
                          //更新组件的护照那台
                          this.setState({
                            todos: this.state.todos,
                          });

                          //保存
                          localStorage.setItem(
                            TODOKEY,
                            JSON.stringify(this.state.todos)
                          );
                        }}
                      ></input>
                    </div>
                    <div className="todo_item_content">{element.content}</div>
                    <div className="todo_item_remove">
                      <button>X</button>
                    </div>
                  </div>
                );
              }
            })}
          </div>
        </div>
      </div>
    );
  }
  //完成
  componentDidMount() {}
  //更新
  componentWillReceiveProps(props) {
    //接受新的props ，更新组件的状态
    this.props = props;
    //去重
    var index = this.state.todos.findIndex((element) => {
      return element.content === this.props.todo.content;
      // 查找数组中是否有符合变量的元素
    });
    if (index !== -1) {
      alert("不能添加重复的todo");
      return;
    }

    this.state.todos.push(this.props.todo);
    //保存
    localStorage.setItem(TODOKEY, JSON.stringify(this.state.todos));

    this.setState({
      todos: this.state.todos,
    });
  }
  //是否允许组件更新
  shouldComponentUpdate() {
    return true;
  }
  componentWillUpdate() {}
  componentDidUpdate() {}
}

export default TodoBoard;
